import React, { useState, useRef, useEffect, useCallback } from 'react';
import Breadcrumb from 'components/common/Breadcrumb';
import './index.less';
import { Button, Row, Col, List } from 'antd';
import Area from 'components/Area';
import { FormOutlined } from '@ant-design/icons';
import { useRequest, useToggle } from 'ahooks';
import { getCameraAll, getCamerasByArea, ICamera } from 'api/Camera';
import CameraEdit from './CameraEdit';
class Camera implements ICamera {
    id = 0;
    ipAddress = '';
    areaId = -1;
    constructor(areaId: number, id?: number) {
        this.id = id || Math.random();
        this.areaId = areaId;
    }
}
const AddEquipment = () => {
    const [selectedArea, setSelectedArea] = useState(-1);
    const [addModalVisible, { toggle: toggleAddModalVisible }] = useToggle();
    const [isEdit, { toggle: toggleIsEdit }] = useToggle(false);
    const areaRef: any = useRef();
    /** 点击添加设备 */
    const addCameraClick = () => {
        toggleAddModalVisible();
    };
    /** 点击表格编辑 */
    const editCamerasClick = () => {
        toggleIsEdit(true);
        toggleAddModalVisible();
    };
    /** 获取全部区域摄像头 */
    const { data: cameraAll, run: getCameraAllRun, loading: cameraAllLoading } = useRequest(getCameraAll, {
        manual: true,
    });

    /** 获取区域级别摄像头 */
    const { data: cameraByArea, run: getCameraByAreaRun, loading: cameraByAreaLoading } = useRequest(
        () => getCamerasByArea({ areaId: selectedArea }),
        {
            manual: true,
        },
    );
    
    const getCameraData = selectedArea === -1 ? getCameraAllRun : getCameraByAreaRun;

    /** 区域变更时 */
    useEffect(() => {
        getCameraData();
    }, [selectedArea]);

    useEffect(() => {
        toggleIsEdit(false);
        if (addModalVisible === false) { // 弹窗关闭时刷新列表
            getCameraData()
        }
    }, [addModalVisible]);

    return (
        <div className="add-equipment">
            <Breadcrumb crumbs={['监控配置', '添加设备']}></Breadcrumb>
            <Button type="primary" className="mb10" onClick={addCameraClick}>
                设备添加
            </Button>
            <Row>
                <Col flex="300px">
                    <Area
                        selectedArea={selectedArea}
                        setSelectedArea={setSelectedArea}
                        editable={true}
                        ref={areaRef}
                    ></Area>
                </Col>
                <Col flex="auto" className="pl20 pr20">
                    <div className="flex-between mb10">
                        <div className="pl20">设备管理</div>
                        <div className="pr20">
                            <Button size="small" type="text" onClick={editCamerasClick}>
                                <FormOutlined />
                                编辑
                            </Button>
                        </div>
                    </div>
                    <List
                        className="camera-list"
                        dataSource={selectedArea === -1 ? cameraAll : cameraByArea}
                        loading={cameraAllLoading || cameraByAreaLoading}
                        bordered
                        renderItem={(item) => (
                            <List.Item
                                key={item.id}
                                extra={<img className="camera-img" src={require('assets/imgs/camera.png')} alt="" />}
                            >
                                <div>
                                    <div className="mb10">所属区域：{areaRef?.current?.areaNameMap[item.areaId]}</div>
                                    <div>Ip地址：{item.ipAddress}</div>
                                </div>
                            </List.Item>
                        )}
                    ></List>
                </Col>
            </Row>
            <CameraEdit
                visible={addModalVisible}
                setVisible={toggleAddModalVisible}
                areas={areaRef?.current?.areas}
                isEdit={isEdit}
                editCameras={cameraAll || []}
            />
        </div>
    );
};
export default AddEquipment;
